<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
     String path=request.getContextPath();
      String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="<%=basePath%>layui/css/layui.css" media="all"/>
<script src="<%=basePath%>layui/layui.js"></script>
</head>
<body>
<div class="demoTable">
  搜索用户名：
  <div class="layui-inline">
   <input class="layui-input" name="username" id="demoReload" autocomplete="off" >
   </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div>
<div class="site-demo-button" id="layerDemo1" style="margin-bottom: 0; display: none">
   <form action="" class="layui-form" method="post">
   <div class="layui-form-item">
      <label class="layui-form-label">登录名</label>
         <div class="layui-input-block">
            <input type="text" name="loginname"   placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
         <div class="layui-input-block">
            <input type="password" name="loginpwd"   placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户名称</label>
         <div class="layui-input-block">
            <input type="text" name="username"   placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">电话号码</label>
         <div class="layui-input-block">
            <input type="text" name="phone"   placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
         <div class="layui-input-block">
            <input type="text" name="email"  placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-inline">
      <label class="layui-form-label">出生日期</label>
         <div class="layui-input-inline">
             <input type="text" name="birthday1" id="birthday1"   lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
   </div>
   
   <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="upload1">上传图片</button>
            <input type="hidden" id="img_url" name="headimg" value=""/>
            <div class="layui-upload-list">
                <img class="layui-upload-img" width="100px" height="80px" id="demo1"/>
                <p id="demoText"></p>
            </div>
        </div>
    </div>
   
   
   <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="1" title="男" >
      <input type="radio" name="sex" value="0" title="女">
    </div>
  </div>
   <div class="layui-form-item">
      <label class="layui-form-label">年龄</label>
         <div class="layui-input-block">
            <input type="text" name="age"   placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">用户身份</label>
    <div class="layui-input-block">
      <select name="usertypeid" lay-filter="aihao">
        <option value=""></option>
        <option value="1">租客</option>
        <option value="2">房东</option>
        <option value="3">管理员</option>
      </select>
    </div>
  </div>
  
   <div class="layui-form-item">
    <label class="layui-form-label">是否在线</label>
    <div class="layui-input-block">
      <input type="radio" name="loginstate" value="1" title="在线" checked="">
      <input type="radio" name="loginstate" value="0" title="下线">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">是否锁定</label>
    <div class="layui-input-block">
      <input type="radio" name="userlockstate" value="1" title="锁定" checked="">
      <input type="radio" name="userlockstate" value="0" title="未锁定">
    </div>
  </div>
   <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="demo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
   </form>
</div>
<!-- 修改 -->
<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0; display: none">
   <form action="" class="layui-form" method="post">
     <div class="layui-form-item">
        <div class="layui-input-block">
           <input type="hidden" name="userid" id="userid" required  lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">用户名称</label>
         <div class="layui-input-block">
            <input type="text" name="username"  id="username" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">电话号码</label>
         <div class="layui-input-block">
            <input type="text" name="phone"  id="phone" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
         <div class="layui-input-block">
            <input type="text" name="email"  id="email" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
    <div class="layui-inline">
      <label class="layui-form-label">出生日期</label>
         <div class="layui-input-inline">
             <input type="text" name="birthday1" id="birthday" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">头像</label>
         <div class="layui-input-block">
            <input type="text" name="headimg"  id="headimg" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   
   <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="radio" name="sex"  value="1" title="男">
      <input type="radio" name="sex"  value="0" title="女">
    </div>
  </div>
   <div class="layui-form-item">
      <label class="layui-form-label">年龄</label>
         <div class="layui-input-block">
            <input type="text" name="age"  id="age" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
      <label class="layui-form-label">注册时间</label>
         <div class="layui-input-block">
            <input type="text" name="createtime1"  id="createtime" lay-verify="date" autocomplete="off" class="layui-input">
        </div>
   </div>
   <div class="layui-form-item">
    <label class="layui-form-label">用户职能</label>
    <div class="layui-input-block">
      <select name="usertypeid" id="usertypeid">
        <option value="1">租客</option>
        <option value="2">房东</option>
        <option value="3">管理员</option>
      </select>
    </div>
  </div>
  
   <div class="layui-form-item">
    <label class="layui-form-label">是否在线</label>
    <div class="layui-input-block">
      <input type="radio" name="loginstate"  value="1" title="在线">
      <input type="radio" name="loginstate"  value="0" title="下线">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">是否锁定</label>
    <div class="layui-input-block">
      <input type="radio" name="userlockstate"  value="1" title="锁定" >
      <input type="radio" name="userlockstate"  value="0" title="未锁定">
    </div>
  </div>
   <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-primary" lay-submit lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
   </form>
</div>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">新增</button>
  </div>
</script> 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
function createTime(v){
	if(v!=null){
	var date = new Date(v);
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    m = m<10?'0'+m:m;
    var d = date.getDate();
    d = d<10?("0"+d):d;
    var h = date.getHours();
    h = h<10?("0"+h):h;
    var M = date.getMinutes();
    M = M<10?("0"+M):M;
    var str = y+"-"+m+"-"+d+" "+h+":"+M;
    return str;
	}else{
		return "";
	}
}
layui.use(['table','laydate'], function(){
	 var table = layui.table;
	  var $=layui.jquery;
	  laydate = layui.laydate;
	  table.render({
		toolbar: '#toolbarDemo',
	    elem: '#demo',
	    url: 'user/queryall', //数据接口
	    page: true, //开启分页
	    id:"testReload",
	    limit:10,
	    limits:[10,20,30,50],
		    cols:[[
              {type: 'checkbox', fixed: 'left'},
              {field: 'userid', title: 'ID', width:80, sort: true, fixed: 'left'},
   	          {field: 'loginName', title: '登录名', width:100},
   	         
   	          {field:'username',title:'用户名称',width:100},
   	          {field:'phone',title:'电话号码',width:140},
   	          {field:'email',title:'邮箱',width:160},
   	          {field:'birthday',title:'出生日期',width:100,templet: function (d){
                  return createTime(d.birthday);
   	          }},
   	          {field:'headimg',title:'头像',width:100,templet:'<div><img src="/img/{{d.headimg}}"></div>'},
              {field:'sex',title:'性别',width:100,templet:"#sex"},
              {field:'age',title:'年龄',width:100},
              {field:'createtime',title:'注册时间',width:100,templet: function (d){
                  return createTime(d.createtime);
              }},
              {field:'updatetime',title:'更新时间',width:100,templet: function (d){
                  return createTime(d.updatetime);
              }},
              {field:'usertypename',title:'用户名称',width:100},
              {field:'loginstate',title:'是否在线',width:100},
              {field:'userlockstate',title:'是否锁定',width:100},
              {field:'closetime',title:'关闭时间',width:100,templet: function (d){
                  return createTime(d.closetime);
              }},
              {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
		      ]],
		      done: function(res, page, count){
		    	  $("[data-field='sex']").children().each(function(){
						if($(this).text()=='1'){
						   $(this).text("男")
						}else if($(this).text()=='0'){
						   $(this).text("女")
						}
		    });
		    	  $("[data-field='loginstate']").children().each(function(){
						if($(this).text()=='1'){
						   $(this).text("在线")
						}else if($(this).text()=='0'){
						   $(this).text("下线")
						}
		    });
		    	  $("[data-field='userlockstate']").children().each(function(){
						if($(this).text()=='1'){
						   $(this).text("锁定")
						}else if($(this).text()=='0'){
						   $(this).text("未锁定")
						}
		    });
		    	  
		        }
	  });
	  table.on('toolbar(test)', function(obj){
		    var checkStatus = table.checkStatus(obj.config.id);
		    switch(obj.event){
		      case 'getCheckData':
		        var data = checkStatus.data;
		        layer.alert(JSON.stringify(data));
		      break;
		      case 'getCheckLength':
		        var data = checkStatus.data;
		        layer.msg('选中了：'+ data.length + ' 个');
		      break;
		      //增加
		      case 'isAll':
		        //layer.msg(checkStatus.isAll ? '全选': '未全选');
		        layui.use('layer', function(){
		        	  var layer = layui.layer;
		        	  var $=layui.jquery;
		        	      layer.open({
		        	          type: 1
		        	          ,offset:"auto" 
		        	          ,content: $("#layerDemo1")
		        	          ,area:"600px"
		        	          ,btn: '关闭全部'
		        	          ,btnAlign: 'c' //按钮居中
		        	          ,shade: 0 //不显示遮罩
		        	          ,yes: function(){
		        	            layer.closeAll();
		        	          }
		        	        });
		         });
		      break;
		    };
		  });
	//监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;//当前行的数据
	    //obj.event:表头的参数对象值
	    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	        $.ajax({
	      	  type:'post',
	      	  url:'user/del',
	      	  data:{"userid":data.userid},
	      	  success:function(msg){
	      		  layer.msg("删除成功");
	      			  table.reload('testReload', {
	      			        page: {
	      			          curr: 1 //重新从第 1 页开始
	      			        },
	      			      });
	      	  }
	        });
	        layer.close(index);
	      });
	    } else if(obj.event === 'edit'){
	    	console.log(data);
	    	 layui.use(['layer','form'], function(){
	      	  var layer = layui.layer;
	      	  var $=layui.jquery;
	      	  var form = layui.form;
	      	$("#userid").val(data.userid);
	    	  $("#username").val(data.username);
	    	  $("#phone").val(data.phone);
	    	  $("#email").val(data.email);
	    	  
	    	  laydate.render({ 
	    		  elem: '#birthday'
	    		  ,value: new Date(data.birthday) //参数即为：2018-08-20 20:08:08 的时间戳
	    		});
	    	  
	    	  $("#headimg").val(data.headimg);
	    	  if(data.sex == 1){
	    	  $("input[name=sex][value=1]").attr("checked",true); 
	    	  }else{  
              $("input[name=sex][value=0]").attr("checked", true);
	    	  }
	    	  $("#age").val(data.age);
	    	  laydate.render({ 
	    		  elem: '#updatetime'
	    		  ,value: new Date(data.updatetime) //参数即为：2018-08-20 20:08:08 的时间戳
	    		});
	    	  
	    	  $("#usertypeid").val(data.usertypeid);
	    	  laydate.render({ 
	    		  elem: '#createtime'
	    		  ,value: new Date(data.createtime) //参数即为：2018-08-20 20:08:08 的时间戳
	    		});
	    	  if(data.loginstate==1){
	    	  $("input[name=loginstate][value=1]").attr("checked", true);	    		  
	    	  }else{
              $("input[name=loginstate][value=0]").attr("checked", true);	    		  
	    	  }
	    	  if(data.loginstate==1){
	    		  
              $("input[name=userlockstate][value=1]").attr("checked",true );
	    	  }else{
              $("input[name=userlockstate][value=0]").attr("checked", true );
	    		  
	    	  }
	    	  laydate.render({ 
	    		  elem: '#closetime'
	    		  ,value: new Date(data.closetime) //参数即为：2018-08-20 20:08:08 的时间戳
	    		});
	      	      layer.open({
	      	          type: 1
	      	          ,offset:"auto" 
	      	          ,content: $("#layerDemo")
	      	          ,area:"600px"
	      	          ,btn: '关闭全部'
	      	          ,btnAlign: 'c' //按钮居中
	      	          ,shade: 0 //不显示遮罩
	      	          ,yes: function(){
	      	            layer.closeAll();
	      	          }
	      	        });
	      	    form.render();
	       }), 
	      function(value, index){
	      	layer.close(index);
	      };
	    }
	  });
	  var $ = layui.$, active = {
			    reload: function(){
			      var username = $('#demoReload').val();
			      //执行重载
			      table.reload('testReload', {
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {
			            name: username,
			        }
			      });
			    }
			  };
		$('.demoTable .layui-btn').on('click', function(){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
		  });
});
layui.use(['form','laydate'],function(){
	 var form = layui.form;
	 var $=layui.jquery;
	  layer = layui.layer
	  ,laydate = layui.laydate;
	 laydate.render({
		    elem: '#birthday'
		  });
	 laydate.render({
		    elem: '#birthday1'
		  });
	 laydate.render({
		    elem: '#createtime'
		  });
	 laydate.render({
		    elem: '#updatetime'
		  });
	 laydate.render({
		    elem: '#closetime'
		  });
	 form.on('submit(demo)',function(data){
		 alert(1);
		 console.log(data);
		 $.ajax({
			 type:'post',
			 data:data.field,
			 url:'user/register',
			 success:function(data){
				  layui.use('layer', function(){
		        	  var layer = layui.layer;
		        	  var $=layui.jquery;
				      layer.msg(data.msg);
				  });
			 }
		 })
	 });
	 form.on('submit(demo1)',function(data){
		 console.log(data.field)
		 $.ajax({
			 type:'post',
			 data:data.field,
			 url:'user/update',
			 success:function(msg){
				 alert(msg);
				 layui.use('layer', function(){
		        	  var layer = layui.layer;
		        	  var $=layui.jquery;
				      layer.msg(msg.msg);
				  });
			 }
		 })
	 })
});
layui.use('upload', function(){
    var upload = layui.upload
        , $ = layui.jquery;
    var uploadInst = upload.render({
        elem: '#upload1' //绑定元素
        ,url: 'update/img' //上传接口
        ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
            });
        },
        done: function(res){
            //如果上传失败
            if(res.code > 0){
                return layer.msg('上传失败');
            }
            //上传成功
            alert("上传成功"+res.url);
            document.getElementById("img_url").value = res.url;
        },
        error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
            });

    }
})
})
</script>
</body>
</html>